<template>
  <a-modal v-model:visible="visible" width="60%" :mask-closable="false" :modal-style="{ maxWidth: '80%' }" @ok="save" @cancel="close">
    <template #title>
      <span style="font-size: 24px">{{ pointData.point_number }}号桶位</span>
    </template>
    <a-descriptions :column="1" :value-style="{ paddingRight: 0 }">
      <a-descriptions-item label="桶位状态:">
        <div style="display: flex; justify-content: space-between">
          <button @click.prevent="pointData.pstatus_point = '空桶'" :class="pointData.pstatus_point == '空桶' ? 'openClick-bucket' : 'openbucket'">空桶</button>
          <button @click.prevent="pointData.pstatus_point = '满桶'" :class="pointData.pstatus_point == '满桶' ? 'openClick-bucket' : 'openbucket'">满桶</button>
          <button @click.prevent="pointData.pstatus_point = '无桶'" :class="pointData.pstatus_point == '无桶' ? 'openClick-bucket' : 'openbucket'">无桶</button>
        </div>
      </a-descriptions-item>
      <a-descriptions-item label="点位状态:">
        <button @click.prevent="pointData.status = 1" :class="pointData.status == 1 ? 'openClick-active' : 'openClick'">启用</button>
        <button @click.prevent="pointData.status = 0" :class="pointData.status == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
const mainStore = useMainStore()
const pointData = ref({
  pstatus_point: '',
  status: 1
})
const visible = ref(false)
function setPointModalVisible(item) {
  pointData.value = item
  visible.value = true
}
const save = () => {
  mainStore.getPointEdit(pointData.value).then(() => {
    Message.success('盘库成功')
    visible.value = false
  })
}
const close = () => {
  mainStore.getYbList()
}
defineExpose({ setPointModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 24px;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.openClick-bucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.openbucket {
  width: 31%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
